<template>
     <div class="user-edit-container">
       <!-- Header 区域 -->
       <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />
   
       <!-- 用户资料 -->
       <van-cell-group class="action-card">
         <van-cell title="头像" is-link center>
           <template #default>
             <van-image round class="avatar" :src="phoobj.photo"  @click="dianjitp"/>
              <input
                  type="file"
                  ref="iptFile"
                  v-show="false"
                  accept="image/*"
                  @change="onFileChange"
                  />
           </template>
         </van-cell>
         <van-cell title="名称" is-link  :value="phoobj.name"  @click="xiugaiming"/>
         <van-cell title="生日" is-link :value="phoobj.birthday" @click="shengre" />
       </van-cell-group>
       <!-- 姓名修改弹出 -->
       <van-dialog v-model="show" title="修改名称" show-cancel-button :before-close='guanbitanchuang'>
                <input type="text" v-model="value" ref="inpu" :style="{marginTop:'10px'}"/>
      </van-dialog>
      <!-- 时间选择器 -->
      <van-popup v-model="showw" position="bottom" :style="{ height: '50%' }" round>
          <van-datetime-picker
              v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="quxiao"
                @confirm="wancheng"
/>
      </van-popup>
     </div>
</template>
   
<script>
import {yonghuziliao,gengxintoux,gengxin} from '@/api/index.js'
import {Notify,Toast} from 'vant'
import {formatDate} from '@/utils/date.js'
  export default {
    name:'useredit',
     data(){
       return {
          phoobj:{}, //用户的个人资料
          show:false, //用来控制姓名选择器出现与隐藏
          value:'',  //修改姓名,输入框双向绑定的值
          minDate: new Date(1920, 0, 1),   //最小范围
          maxDate:new Date(),  //最大范围 默认获取系统最新的日期
          currentDate: new Date(2021, 0, 17),  //当前时间
          showw:false,//用来控制生日选择器的出现与隐藏
       }
     },
   async mounted(){
        const req=await yonghuziliao()
         this.phoobj=req.data.data
         this.value=req.data.data.name
    },
  methods:{
    async onFileChange(e){ //文件选择的事件
    if(e.target.files.length==0) return  //用户可能没选择图片,不需要发送请求直接退出
    //因为此数组是一个特殊的对象,要第0项才是想要的数据
      //创建FromData对象
      const theFd=new FormData()
      theFd.append('photo',e.target.files[0])
     const req=await gengxintoux(theFd)
      this.phoobj.photo=req.data.data.photo
    },
    dianjitp(){ //点击图片的事件
       this.$refs.iptFile.click()  //js模拟点击标签的事件触发,利用点击图片触发input框的点击事件来触发上传图片
    },
    xiugaiming(){ //修改名称的点击事件
        this.show=true  //使修改名字弹窗显示出来
       setTimeout(()=>{  //利用延时器延时调用input框自动聚焦方法
         this.$refs.inpu.focus()
       },400)
    },
   async guanbitanchuang(action, done){ //
          if(action=='confirm'){ //代表用户点的是确认按钮,要对修改的名称进行判断
          //计算机中对文字、字符有多种编码格式
          //utf-8 编码成中文字符
          //url编码 %E6%88%91%E6%98%AF%E4%BD%A0%E7%88%B9%E5%91%80
          //unicode编码 \u4e00-\u9fa5
             let reg=/^[a-zA-Z0-9\u4e00-\u9fa5]{1,11}$/
             if(reg.test(this.value)){ //通过校验
               await gengxin({
                 name:this.value
               })
                const req=await yonghuziliao()
                this.phoobj=req.data.data
                this.value=req.data.data.name
                Toast.success('修改成功');
                  done()
             }else{
                 Notify({type:'warning', message:'用户名只能是1-11位中英文、数字的组合'})
                 done(false)
             }
          }else{  //代表用户点的取消按钮直接关闭弹窗即可
              done()
              this.value =this.phoobj.name
          }
    },
    shengre(){  //点击生日面板出现日期选择器的函数
      this.showw=true
      this.currentDate=new Date(this.phoobj.birthday)
    },
    quxiao(){ //日期选择器取消事件
      this.showw=false
    },
   async wancheng(){ //日期选择器完成事件
       await gengxin({birthday:formatDate(this.currentDate)  //发送请求更新生日
       })
      this.phoobj.birthday=formatDate(this.currentDate)  //单元格同步
      this.showw=false  //让日器选择器隐藏
    }
  }
 }
</script>
   
<style lang="less" scoped>
   .user-edit-container {
     padding-top: 46px;
     .avatar {
       width: 50px;
       height: 50px;
     }
   }
/deep/ .van-dialog__content{
           text-align: center;
           input{
           border: none;
           text-align: center;
           }
}
   </style>